import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Tabs, NavBar, Icon, SearchBar, SegmentedControl } from 'antd-mobile';
import withRedux from 'next-redux-wrapper';
import Router from 'next/router';
import Content from '../../views/common/Content';
import ScenicListView from '../../views/scenic/ScenicListView';
import UIUtil from '../../core/utils/UIUtil';
import { 
    asyncGetListAction,
    setSelectedTabIndexAction, 
    goBackAction, 
    setKeywordAction 
} from '../../store/actions/scenic/listAction';
import initStore from '../../store/initStore';
// import queryString from 'query-string';

class ScenicListScreen extends PureComponent
{
    tabs = [
        {title: '综合', tabIndex: 0},
        {title: '评分', tabIndex: 1},
        {title: '价格', tabIndex: 2},
        {title: '距离', tabIndex: 3},
        {title: '最新', tabIndex: 4},        
    ];
    isBrowser()
    {
        return typeof window !== 'undefined';
    }
    componentDidMount()
    {
        this.onItemClick = this.onItemClick.bind(this);
        this.goBack = this.goBack.bind(this);
    }
    render()
    {
        let winHeight = this.isBrowser() ? window.innerHeight : 500;
        let tabHeight = winHeight - (45 + 44);
        let listViewHeight = winHeight - (45 + 44 + 44);

        // let urlSearch = queryString.parse(this.props.location.search);

        return (
            <div>
                <NavBar mode="dark" 
                    className="navBar"
                    icon={<Icon type="left" />}
                    onLeftClick={this.goBack}>
                    景区列表
                </NavBar>
                <Content>
                    <SearchBar placeholder="请输入关键字" 
                        maxLength={20} 
                        value={this.props.keyword}
                        onChange={(val)=>{this.updateKeyword(val);}}
                        onSubmit={(val)=>{
                            this.updateKeyword(val);
                            this.searchByKeyword(val);
                        }}/>
                    <Tabs tabs={this.tabs}
                        ref={(ref)=>UIUtil.updateComponentHeight(ref, tabHeight)}
                        style={{height: tabHeight}}
                        initialPage={this.props.selectedTabIndex}
                        prerenderingSiblingsNumber={0}
                        onChange={(tab, index) => { 
                            this.props.dispatch(setSelectedTabIndexAction(index));
                            this.searchByKeyword(this.props.keyword, index);
                        }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}>
                        {
                            this.tabs.map((item, index)=><ScenicListView key={index} 
                                ref={(listView)=>{
                                    if(listView)
                                    {
                                        this.tabs[index].listView = listView.getWrappedInstance();
                                    }
                                }}
                                onItemClick={this.onItemClick}
                                tabIndex={item.tabIndex} 
                                height={listViewHeight}/>)
                        }
                    </Tabs>
                </Content>
            </div>
        );
    }
    updateKeyword(keyword)
    {
        this.props.dispatch(setKeywordAction(keyword));
    }
    searchByKeyword(keyword, index = undefined)
    {
        index = (index === undefined) ? this.props.selectedTabIndex : index;
        let listView: ScenicListView = this.tabs[index].listView;
        if(!listView)
        {
            return;
        }
        listView.searchByKeyword(keyword);
    }
    onItemClick(item)
    {
        if(!item)
        {
            return;
        }
        for(let i = 0; i < this.tabs.length; i++)
        {
            let listView: ScenicListView = this.tabs[i].listView;
            if(listView)
            {
                listView.cacheScrollOffset();
            }
        }
        this.props.history.push(`/scenic/detail/${item.Code}`);
    }
    goBack()
    {
        let dispatch = this.props.dispatch;
        // this.props.history.goBack();
        Router.back();
        dispatch(goBackAction());
    }
}

const mapStateToProps = function(state)
{
    return {
        selectedTabIndex: state.scenic.listScreen.selectedTabIndex,
        keyword: state.scenic.listScreen.keyword
    };
};

ScenicListScreen = withRedux(initStore, mapStateToProps)(ScenicListScreen);

export default ScenicListScreen;